<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习1</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!--1.先布局，放置一个复选框，一个下拉框，两个文本框，一个展示结果的div
        2，把每个表单原始的对应数据展示出来，用于过程性检查，后期删除
        3，把下拉框和展示结果的div进行隐藏和显示的操作
        4，获取文本框中的数据，根据是否会员以及等级来决定折扣比例，进行计算，
        可以使用计算属性，侦听器来实现-->
        <input type="checkbox" @click="show=!show" >是否会员
        <select name="" id="" v-model="select1" v-show="show">
            <option value="砖石会员" >砖石会员</option>
            <option value="黄金会员">黄金会员</option>
            <option value="白银会员">白银会员</option>
        </select>
        {{select1}}欢迎您
        <br>
        数量：<input type="text" v-model="num" ><br>
        单价：<input type="text" v-model="num1"  @keydown.enter="show1=true" @blur="hy" >
        <p v-show="show1">尊敬的{{select1}},您购买的数量是{{num}},
            单价是{{num1}},折扣是{{zhekuo}}，一共是{{ans.toFixed(2)}}
        </p>
    </div>
</body>
</html>
<script>
    const connApp=Vue.createApp({
        data() {
            return {
                select1:'顾客',
                show:false,
                num:'',
                num1:'',
                show:false,
                show1:false,
                zhekuo:'1',
                ans:0.00,
            }
        },
        methods: {
            hy(){
                if(this.select1=="砖石会员") this.zhekuo=0.5;
                else if(this.select1=="黄金会员") this.zhekuo=0.6;
                else if(this.select1=="白银会员") this.zhekuo=0.7;
                else{
                    this.zhekuo=1;
                    this.select1='顾客';
                }
                this.ans= this.num*this.num1*this.zhekuo
                this.show1=true;
            },
        },
        watch:{
            show(newval){
                if(!newval){
                    this.select1='顾客';
                    this.zhekuo=1;
                }
            }
        }
    }).mount("#app")
    
</script>